<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit" label-width="140px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.grade')">
                        <el-date-picker
                            clearable
                            v-model="queryForm.grade"
                            value-format="yyyy"
                            type="year"
                            :placeholder="$t('message.plzSelect')"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.college')">
                        <el-select
                            v-model="queryForm.faculty"
                            filterable
                            style="width:100%;height:33px"
                            clearable
                            @change="handleChangeFaculty"
                            multiple
                            collapse-tags
                        >
                            <el-option
                                v-for="item in options.faculty"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.major')">
                        <el-select
                            v-model="queryForm.profession"
                            filterable
                            style="width:100%;height:33px"
                            clearable
                            multiple
                            collapse-tags
                        >
                            <el-option
                                v-for="item in options.profession"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingLevel')">
                        <el-select v-model="queryForm.trainingLevel" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingCategory')">
                        <el-select
                            v-model="queryForm.trainingCategory"
                            style="width:100%"
                            clearable
                        >
                            <el-option
                                v-for="item in options.trainingCategory"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('dic.degreeType')">
                        <el-select
                            v-model="queryForm.degreeType"
                            style="width:100%"
                            clearable
                            @change="handleChangeFaculty"
                        >
                            <el-option
                                v-for="item in options.degreeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.formLearning')">
                        <el-select v-model="queryForm.formLearning" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.formLearning"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.lengthSchooling')">
                        <el-select v-model="queryForm.lengthSchooling" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.lengthSchooling"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.isOverseas')">
                        <el-select v-model="queryForm.isOverseas" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.isOverseas"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="是否港澳台">
                        <el-select v-model="queryForm.isChinaSon" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.isChinaSon"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否注册">
                        <el-select
                            v-model="queryForm.registeredStatus"
                            style="width:100%"
                            clearable
                        >
                            <el-option
                                v-for="item in options.registeredStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="超过预计毕业时间">
                        <el-select
                            v-model="queryForm.isOverMaxLengthSchooling"
                            style="width:100%"
                            clearable
                        >
                            <el-option
                                v-for="item in options.isOverMaxLengthSchooling"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="超期时间">
                        <el-date-picker
                            clearable
                            v-model="queryForm.overdueTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :placeholder="$t('message.plzSelect')"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!-- <el-form-item label="是否答辩">
                        <el-select v-model="queryForm.isDefense" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.isDefense"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="超过最长学习年限">
                        <el-select v-model="queryForm.isOverMaxLengthSchoolingReal" style="width:100%" clearable>
                            <el-option
                                v-for="item in options.isOverMaxLengthSchooling"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">超期学生名单列表</div>
            <el-row>
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        :placeholder="$t('score.failScoreManage.pleaseInt')"
                        @keyup.enter.native="onSubmit"
                        style="width:200px"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        ></i>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <div class="empty-box" />
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-button @click="handleExport">{{$t('message.export')}}</el-button>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                :data="students"
                size="mini"
                style="width:100%"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :pageNum="queryForm.pageNum_"
                @selection-change="handleSelectionChange"
                :order="false"
            >
                <el-table-column
                    fixed="left"
                    :label="$t('label.stuCode')"
                    prop="studentId"
                    width="80"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    fixed="left"
                    :label="$t('label.stuName')"
                    prop="studentName"
                    show-overflow-tooltip
                    width="80"
                ></el-table-column>
                <el-table-column :label="$t('label.grade')" prop="grade" width="60"></el-table-column>
                <el-table-column :label="$t('label.college')" show-overflow-tooltip width="120">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.major')" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.professionName }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.trainingLevel')">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.trainingCategory')" width="100">
                    <template slot-scope="scope">{{ scope.row.trainingCategoryI18n }}</template>
                </el-table-column>
                <el-table-column :label="$t('dic.degreeType')" prop="degreeType">
                    <template slot-scope="scope">{{ scope.row.degreeTypeI18n }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.formLearning')">
                    <template slot-scope="scope">{{ scope.row.formLearningI18n }}</template>
                </el-table-column>
                <el-table-column label="导师" show-overflow-tooltip width="120">
                    <template slot-scope="scope">{{ scope.row.teacher }}</template>
                </el-table-column>
                <el-table-column label="入学时间" show-overflow-tooltip width="120">
                    <template slot-scope="scope">{{ getFormatDate(scope.row.enrolDate) }}</template>
                </el-table-column>
                <el-table-column label="预计毕业时间" show-overflow-tooltip width="120">
                    <template
                        slot-scope="scope"
                    >{{ getFormatDate(scope.row.expectedGraduationDate) }}</template>
                </el-table-column>
                <el-table-column label="学制" width="80">
                    <template slot-scope="scope">{{ scope.row.lengthSchooling }}</template>
                </el-table-column>
                <el-table-column label="最长学习年限" show-overflow-tooltip width="120">
                    <template slot-scope="scope">{{ scope.row.maxLengthSchooling }}</template>
                </el-table-column>
                <el-table-column label="超过预计毕业时间" width="140">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.isOverMaxLengthSchooling==1?null:'info'"
                        >{{ scope.row.isOverMaxLengthSchooling==1?$t('message.yes'):$t('message.no')}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="超过最长学习年限" width="160">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.isOverMaxLengthSchoolingReal==1?null:'info'"
                        >{{ scope.row.isOverMaxLengthSchoolingReal==1?$t('message.yes'):$t('message.no')}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="超期时间" show-overflow-tooltip width="120">
                    <template slot-scope="scope">{{getFormatDate(scope.row.overdueTime) }}</template>
                </el-table-column>
                <!-- <el-table-column label="是否答辩" width="100">
                    <template slot-scope="scope">{{scope.row.isDefense }}</template>
                </el-table-column> -->
                <el-table-column label="是否国际学生" width="110">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.isOverseas==1?null:'info'"
                        >{{ scope.row.isOverseas==1?$t('message.yes'):$t('message.no') }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否港澳台" width="100">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.isChinaSon=='是'?null:'info'"
                        >{{ scope.row.isChinaSon }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="国家地区" show-overflow-tooltip width="100">
                    <template slot-scope="scope">{{ scope.row.countryI18n}}</template>
                </el-table-column>
                <el-table-column label="注册状态" width="100">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.registeredStatus=='1'?'success':'danger'"
                        >{{ getRegisteredStatus(scope.row.registeredStatus) }}</el-tag>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import { selectOverdueList, exportOverdueList } from "common/src/api/culture/change";
export default {
    name: "DelayStudentList",
    data: function() {
        return {
            queryForm: {
                grade: null,
                faculty: [],
                profession: [],
                trainingLevel: null,
                trainingCategory: null,
                degreeType: null,
                formLearning: null,
                lengthSchooling: null,
                isOverseas: null,
                isChinaSon: null,
                registeredStatus: null,
                isOverMaxLengthSchooling: null,
                overdueTime: null,
                isOverMaxLengthSchoolingReal: null,
                keyWord: null,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            options: {
                faculty: [],
                profession: [],
                trainingLevel: [],
                trainingCategory: [],
                degreeType: [],
                formLearning: [],
                lengthSchooling: [],
                isOverseas: [],
                isChinaSon: [],
                registeredStatus: [],
                isOverMaxLengthSchooling: [],
                isDefense: []
            },
            students: null,
            selectStudents: []
        };
    },
    mounted() {
        this.queryForm.overdueTime = moment(new Date()).format("YYYY-MM-DD");
        this.init();
    },
    methods: {
        init() {
            this.options.isOverseas.push({
                label: this.$t("message.yes"),
                value: "1"
            });
            this.options.isOverseas.push({
                label: this.$t("message.no"),
                value: "0"
            });
            this.options.isChinaSon.push({
                label: this.$t("message.yes"),
                value: "1"
            });
            this.options.isChinaSon.push({
                label: this.$t("message.no"),
                value: "0"
            });
            this.options.registeredStatus.push({
                label: this.$t("message.yes"),
                value: "1"
            });
            this.options.registeredStatus.push({
                label: this.$t("message.no"),
                value: "0"
            });
            this.options.isOverMaxLengthSchooling.push({
                label: this.$t("message.yes"),
                value: "1"
            });
            this.options.isOverMaxLengthSchooling.push({
                label: this.$t("message.no"),
                value: "0"
            });
            // this.options.isDefense.push({
            //     label: this.$t("message.yes"),
            //     value: "1"
            // });
            // this.options.isDefense.push({
            //     label: this.$t("message.no"),
            //     value: "0"
            // });
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_YX",
                    "X_PYCC",
                    "X_PYLB",
                    "X_XWLX",
                    "X_XXXS",
                    "X_RXFS",
                    "X_XZ"
                ]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fill("faculty", res.data.X_YX);
                    this.fill("trainingLevel", res.data.X_PYCC);
                    this.fill("trainingCategory", res.data.X_PYLB);
                    this.fill("degreeType", res.data.X_XWLX);
                    this.fill("formLearning", res.data.X_XXXS);
                    //学制项排序
                    let lengthSchooling = new Array();
                    for (const key in res.data.X_XZ) {
                        lengthSchooling.push(key);
                    }
                    lengthSchooling.sort();
                    lengthSchooling.forEach(key => {
                        this.options.lengthSchooling.push({
                            value: key,
                            label: res.data.X_XZ[key]
                        });
                    });
                }
            });
            this.onSubmit();
        },
        fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        reset() {
            this.queryForm.grade = null;
            this.queryForm.faculty = [];
            this.queryForm.profession = [];
            this.queryForm.trainingLevel = null;
            this.queryForm.trainingCategory = null;
            this.queryForm.degreeType = null;
            this.queryForm.formLearning = null;
            this.queryForm.lengthSchooling = null;
            this.queryForm.isOverseas = null;
            this.queryForm.isChinaSon = null;
            this.queryForm.registeredStatus = null;
            this.queryForm.isOverMaxLengthSchooling = null;
            this.queryForm.overdueTime = moment(new Date()).format(
                "YYYY-MM-DD"
            );
            this.queryForm.isOverMaxLengthSchoolingReal = null;
            this.queryForm.keyWord = null;
            this.onSubmit();
        },
        onSubmit(isFirstPage = true) {
            if (isFirstPage) {
                this.queryForm.pageNum_ = 1;
            }
            let params = _.cloneDeep(this.queryForm);
            params.faculty =
                params.faculty.length > 0 ? params.faculty.join(",") : null;
            params.profession =
                params.profession.length > 0
                    ? params.profession.join(",")
                    : null;
            selectOverdueList(params).then(res => {
                if (res.code == 200) {
                    this.students = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        handleChangeFaculty() {
            this.options.profession = [];
            this.queryForm.profession = [];
            if (!this.queryForm.faculty) {
                return;
            }
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: this.queryForm.faculty,
                    specilaCode: "XY2ZY",
                    grade: null,
                    facultys: this.queryForm.faculty,
                    degreeType: this.queryForm.degreeType
                        ? [this.queryForm.degreeType]
                        : []
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200) this.fill("profession", res.data.G_ZY);
            });
        },
        handleExport() {
            let params=_.cloneDeep(this.queryForm);
            if(this.selectStudents.length>0){
                params.ids= this.selectStudents
                              .map(s => s.studentId)
                              .join(",")
            }
            window.open(exportOverdueList(params));
        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit(false);
        },
        handleSelectionChange(val) {
            this.selectStudents = val;
        },
        getFormatDate(date) {
            return date ? moment(date).format("YYYY-MM-DD") : null;
        },
        getRegisteredStatus(status) {
            return status == "1" ? "已注册" : "未注册";
        }
    }
};
</script>
